<template>
  <div class="shopdetail-content">
    <!-- 下面的是我们的头部 -->
    <div class="headerbox" v-bind:style="{backgroundImage: 'url(' + bannerimg + ')'}">
      <div class="tit">
        <div class="lefticon" @click="Suk_back">
          <van-icon name="arrow-left"/>
        </div>
        <div class="shopname">{{ tit }}</div>
        <div class="righticon">
          <van-icon name="share" @click="Suk_share"/>
          <van-icon name="like-o" v-if="hascollect == false" @click="tocollect"/>
          <van-icon name="like" v-if="hascollect == true" color="#ff9910" @click="nocollect"/>
        </div>
      </div>
      <div class="fixedicon animated bounceInRight delay-0.5s" @click="todiscount">商家优惠券</div>
      <div
        class="fixedicon animated bounceInRight delay-0.5s"
        style="top:2.1rem"
        @click="tostoreintroduce"
      >商家详情
      </div>
      <div
        class="fixedicon animated bounceInRight delay-0.5s"
        style="top:3rem"
        @click="toevaluate"
      >商家评论
      </div>

      <!-- 下面的是我们的头部图片 -->
      <div class="headerimgbox">
        <img :src="headerimg?headerimg:nologo">
      </div>
    </div>
    <!-- 下面的是我们的头部公告 -->
    <div class="notice">
      <div style="color:#ff9b10">公告：{{ desc }}</div>
      <div>
        <van-icon name="arrow"/>
      </div>
    </div>
    <!-- 下面的是我们的菜品分类 -->
    <van-badge-group :active-key="activeKey" @change="onChange" class="tplistbox">
      <van-badge :title="item.className" v-for="(item,index) in items" :key="index" class="tplist"/>
    </van-badge-group>
    <!-- 下面的是我们的商品列表 -->
    <div class="foodlistbox">
      <div class="foodlist" v-for="(list,index) in lists" :key="index">
        <div class="foodleft" @click.capture="tofooddetail(index)">
          <img :src="list.image" class="foodimg">
        </div>
        <div class="foodright">
          <div class="foodtit">{{ list.productName }}</div>

          <div class="foodtit" v-if="list.isroom === 1">（到店用餐）</div>
          <div class="foodtit" v-if="list.showcreate != null && list.showcreate != ''">售卖时间：{{ list.showcreate }}-{{ list.showend }}</div>
          <div class="fooddesc">口味介绍：{{ list.remark }}</div>
          <div class="foodsold">月售{{ list.saleNums }}</div>
          <!--赞{{ list.level }}-->
          <div class="foodmoney">￥{{ list.price ? list.price : 0 }}</div>
          <div class="foodshop" @click="add(index)">
            <van-icon name="plus" style="margin-right:0.1rem"/>
            购物车
          </div>
        </div>
      </div>
    </div>
    <!-- 下面的是展示我们的商品规格 -->
    <!-- <van-popup v-model="showfoodsize" class="showfoodbox">
      <div class="foodsizebox">
        <div class="foodsizesbox">
          <div class="foodsizetit">
            <div></div>
            <div class="foodsizename">这里是我们的商品规格</div>
            <div class="closeimgbox" @click="Suk_closesize">
              <img src="@/assets/img/icon_cdxz_tc.png">
            </div>
          </div>
          <div>
            <p>规格：</p>
            <div class="foodsizelist">
              <div
                v-for="(item,index) in foodsizelist"
                :key="index"
                class="size"
                :class="{active:index==dynamic}"
                @click="Suk_haschecksize(index)"
              >{{ item.size }}</div>
            </div>
            <p>辣度：</p>
            <div class="foodsizelist">
              <div
                v-for="(item,index) in foodscovillelist"
                :key="index"
                class="size"
                :class="{active:index==removes}"
                @click="Suk_hascheck(index)"
              >{{ item.scoville }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="pushshopbox">
        <div></div>
        <div class="pushshop" @click="Suk_pushshop">
          <van-icon name="plus"/>
          <div style="margin-left:0.2rem">加入购物车</div>
        </div>
      </div>
    </van-popup>-->
    <!-- 下面的是我们的购物车功能 -->
    <div class="myshop" @click="showshop = true">
      <van-icon name="cart-o" :info="allfoodnum?allfoodnum:null"/>
    </div>
    <van-popup v-model="showshop" position="bottom" class="shopbigbox">
      <div class="white">
        <div class="shopfoodlist" v-for="(list,index) in shoplist" :key="index">
          <div class="shoplistleft">
            <!-- <div class="yesiconbox">
              <img src="@/assets/img/icon_yes.png">
            </div>-->
            <div class="foodimgbox">
              <img :src="list.image" class="shopfoodimg">
            </div>
            <div class="shopfooddesc">
              <p style="color:#464646;font-weight:600;font-size:0.4rem">{{ list.product_name }}</p>
              <p style="color:#ff9910;font-weight:600;font-size:0.4rem">￥ {{ list.price }}</p>
            </div>
          </div>
          <div class="shoplistright">
            <div class="jianbox">
              <img src="@/assets/img/jian.png" @click="shopmiu(index)">
            </div>
            <div class="shopnum">{{ list.number }}</div>
            <div class="jiabox">
              <img src="@/assets/img/jia.png" @click="shopadd(index)">
            </div>
          </div>
        </div>
      </div>
      <div class="gray">
        配送费{{ peisongmoney }}元
        包装费{{ box }}元
      </div>
      <div class="orange">
        <div class="orange-left">总金额</div>
        <div class="orange-middle" style="margin-right:0.3rem">￥{{ allmoney2 ? allmoney2 : 0 }}</div>
        <div class="orange-right" @click="topay" v-if="hascheck == 0">结算</div>
      </div>
    </van-popup>
    <!-- 下面的是我们的展示分享 -->
    <!-- <van-popup v-model="showshare" position="bottom" class="sharebox">
      <div class="iconbox">
        <div class="weiiconbox" @click="Suk_share">
          <img src="@/assets/img/wxpay.png" alt>
        </div>
        <div class="weibobox" @click="Suk_sharepy">
          <img src="@/assets/img/weibo.png" alt>
        </div>
      </div>
    </van-popup> -->
    <van-popup v-model="showshare" position="bottom" class="sharebtnbox">
      <div class="cancelbtn" @click="showshare = false">取消</div>
    </van-popup>
  </div>
</template>
<script>
// import Affix from 'iview/src/components/Affix';
// Vue.component('Affix',Affix)
export default {
  data() {
    return {
      bannerimg: null,
      showshop: false,
      showshare: false, //显示我们的分享
      nologo: require("@/assets/img/logo.png"), //这是我们的logo占位图
      box: null, //餐盒费
      show: false, //显示弹出框的控制
      shoplist: [], //购物车的列表
      headerimg: null,
      hascollect: 0, //收藏店铺的控制
      hasfood: 1, //购物车的状态
      peisongmoney: 0, //配送费
      hascheck: 1, //选好了的按钮的显示控制
      nofood: 0, //没有菜的提醒显示控制
      nocaidan: 0, //没菜单控制
      qisongmoney: 0, //起送的价钱
      allmoney: 0, //所有的商品的钱数
      allmoney2: 0, //所有的钱数的
      activeKey: 0, //点击左侧菜单的索引
      foodnum: 0, //所选的菜的数量
      allfoodnum: 0, //所有的菜的数量
      storeid: "", //这是我们的商家的商家id
      arrs: [],
      lists: [], //这是我们的菜单
      items: [
        {
          className: "全部"
        }
      ],
      // 左侧高亮元素的index
      mainActiveIndex: 0,
      // 被选中元素的id
      activeId: 1,
      active: 0,
      tit: "",
      desc: "可好吃了可好吃了可好吃了可好吃了可好吃了"
    };
  },
  beforeCreate: function () {
    //创建前
  },
  created: function () {
    this.getlist();
    this.menu();
    this.getnotice();
    //     this.$ref.aaa
  },
  beforeMount: function () {
    //挂载前
  },
  beforeUpdate: function () {
    //更新前
  },
  update: function () {
    //更新后
  },

  // 下面的是缓存进去的时候
  activated() {
    // console.log(this.$route.params.storeid)
    this.getlist();
    this.menu();
    this.getnotice();
  },
  mounted() {
    //给window添加一个滚动滚动监听事件
    //   window.addEventListener('scroll', this.handleScroll)
    //   console.log(document.querySelector('#searchBar').scrollTop,'here')
  },
  methods: {
    // 到选择店家的优惠券去
    todiscount() {
      let that = this;
      that.$router.push({
        name: "chooseshopdis"
      });
    },
    Suk_share() {
      dsBridge.call("shareUrl", "https://www.pgyer.com/eT6b");
    },
    // Suk_sharepy(){
    //   dsBridge.call("shareUrl", "pgyer.com/c64u");
    // },
    // 下面的是到我们的支付订单页面
    Suk_topay() {
      let that = this;
      that.$router.push({
        name: "paydetail"
      });
    },
    // 下面的是到我们的商品列表取
    Suk_tofooddetail() {
      let that = this;
      that.$router.push({
        name: "fooddetail"
      });
    },
    // 下面的是我们的收藏店铺的操作
    Suk_collect() {
      let that = this;
      that.hascollect = true;
    },
    // 下面的是我们的取消收藏店铺的操作
    Suk_removecollect() {
      let that = this;
      that.hascollect = false;
    },
    // 下面的是加入我们的购物车操作
    Suk_pushshop() {
      this.Suk_closesize();
      console.log(123);
    },
    // 下面是我们点击添加类的操作
    Suk_haschecksize(index) {
      let that = this;
      console.log(index);
      that.dynamic = index;
    },
    // 下面是我们点击添加类的操作
    Suk_hascheck(index) {
      let that = this;
      console.log(index);
      that.removes = index;
    },
    // 下面的是关闭航拍规格
    Suk_closesize() {
      let that = this;
      that.showfoodsize = false;
    },
    // 下面的是显示我们的商品规格的操作
    Suk_showfoodsize() {
      let that = this;
      that.showfoodsize = true;
    },
    //   下面的是我们的显示购物车
    Suk_showshop() {
      let that = this;
      that.showshop = true;
    },
    //   下面的是返回操作
    Suk_back() {
      this.$router.go(-1);
    },
    // 点击改变菜品
    onChange(key) {
      this.activeKey = key;
    },

    // 点击显示我们的弹出框
    showlist() {
      this.show = !this.show;
    },
    nocollect() {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        diningId: localStorage.getItem("storeid"),
        userId: localStorage.getItem("userid")
      };
      that.axios
        .post(
          that.baseUrl + "/collect/deleteCollectlp",
          that.Qs.stringify(Sukdata),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(function (res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              that.hascollect = 0;
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    tocollect() {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        diningId: localStorage.getItem("storeid"),
        userId: localStorage.getItem("userid")
      };
      that.axios
        .post(
          that.baseUrl + "/collect/addCollectLp",
          that.Qs.stringify(Sukdata),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(function (res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              that.hascollect = 1;
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    tofooddetail(index) {
      let that = this;
      that.$router.push({
        name: "foodDetail",
        params: {
          foodid: that.lists[index].id
        }
      });
    },
    topay() {
      this.$router.push({
        name: "payorder"
      });
    },
    // 下面的是我们的查询店铺公告的内容
    getnotice() {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        din_id: localStorage.getItem("storeid")
      };
      that.axios
        .post(that.baseUrl + "/notice/getNotice", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function (res) {
          if (res.request.status === 200) {
            console.log(res.data, 1111111111111111111);
            if (res.data.meta.code == 200) {
              if (res.data.data.length > 0) {
                that.desc = res.data.data[0].content;
                that.$toast.clear();
              } else {
                return false;
              }
            } else if (res.data.meta.code == 501) {
              that.$toast.clear();
            }
          }
        });
    },
    menu(e) {
      window.scrollTo(0, 0);
    },
    onChange(key) {
      let that = this;
      that.activeKey = key;
      window.scrollTo(0, 0);
      that.getlist(that.items[that.activeKey].classId);
    },
    miu(index) {
      let that = this;
      if (that.lists[index].foodnumzzc <= 0) {
        return false;
      } else {
        that.$toast.loading({
          message: "加载中..."
        });
        var Sukdata = {
          userId: localStorage.getItem("userid"),
          dinId: localStorage.getItem("storeid"),
          productId: that.lists[index].id,
          num: -1,
          price: that.lists[index].price
        };
        that.axios
          .post(
            that.baseUrl + "/shopp/insertShopp",
            that.Qs.stringify(Sukdata),
            {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded"
              }
            }
          )
          .then(function (res) {
            if (res.request.status === 200) {
              if (res.data.meta.code == 200) {
                console.log(that.items[that.activeKey], "111111111111111");
                // that.allmoney2 = res.data.data.data.total;
                that.getlist(that.items[that.activeKey].classId);
                that.$toast.clear();
              } else if (res.data.meta.code == 501) {
              }
            }
          });
      }
    },
    add(index) {

      let that = this;
      let sc = that.lists[index].showcreate;
      let sc2 = that.lists[index].showend;
      if (sc != null && sc != "") {
        let now = new Date();
        let _month = (10 > (now.getMonth() + 1)) ? "0" + (now.getMonth() + 1) : now.getMonth() + 1;
        let _day = (10 > now.getDate()) ? '0' + now.getDate() : now.getDate();
        let _hour = (10 > now.getHours()) ? '0' + now.getHours() : now.getHours();
        let _minute = (10 > now.getMinutes()) ? '0' + now.getMinutes() : now.getMinutes();
        let _second = (10 > now.getSeconds()) ? '0' + now.getSeconds() : now.getSeconds();
        let xxkj = new Date(now.getFullYear() + '-' + _month + '-' + _day + ' ' + _hour + ':' + _minute + ':' + _second);
        let xxkj2 = new Date(now.getFullYear() + '-' + _month + '-' + _day + " " + sc + ":00");
        let xxkj3 = new Date(now.getFullYear() + '-' + _month + '-' + _day + " " + sc2 + ":00");
        // if(xxkj.getHours()>xxkj2.getHours()){
        //
        // }else if(xxkj.getHours()==xxkj2.getHours()){
        //   if(xxkj.getMinutes()>=xxkj2.getMinutes()){
        //
        //   }
        // }
        if (xxkj >= xxkj2 && xxkj <= xxkj3) {

        } else {

          that.$toast.loading({
            message: "未到开始售卖时间..."
          });
          return
        }
      }

      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        userId: localStorage.getItem("userid"),
        dinId: localStorage.getItem("storeid"),
        productId: that.lists[index].id,
        num: 1,
        price: that.lists[index].price
      };
      // console.log(Sukdata);
      that.axios
        .post(that.baseUrl + "/shopp/insertShopp", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function (res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              console.log(res.data, "2222222222222");
              // that.allmoney2 = res.data.data.data.total;
              that.getlist(that.items[that.activeKey].classId);
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    shopmiu(index) {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        userId: localStorage.getItem("userid"),
        dinId: localStorage.getItem("storeid"),
        productId: that.shoplist[index].productId,
        num: -1,
        price: that.shoplist[index].price
      };
      that.axios
        .post(that.baseUrl + "/shopp/insertShopp", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function (res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              // that.allmoney2 = res.data.data.data.total;
              that.getlist(that.items[that.activeKey].classId);
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    shopadd(index) {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        userId: localStorage.getItem("userid"),
        dinId: localStorage.getItem("storeid"),
        productId: that.shoplist[index].productId,
        num: 1,
        price: that.shoplist[index].price
      };
      that.axios
        .post(that.baseUrl + "/shopp/insertShopp", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function (res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              // that.allmoney2 = res.data.data.data.total;
              that.getlist(that.items[that.activeKey].classId);
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    // getshoplist() {
    //   let that = this;
    //   that.$toast.loading({
    //     message: "加载中..."
    //   });
    //   var Sukdata = {};
    //   console.log(Sukdata);
    //   that.axios
    //     .post(that.baseUrl + "/shopp/addShoppinges", that.Qs.stringify(Sukdata), {
    //       headers: {
    //         "Content-Type": "application/x-www-form-urlencoded"
    //       }
    //     })
    //     .then(function(res) {
    //       if (res.request.status === 200) {
    //         if (res.data.meta.code == 200) {
    //           console.log(res.data);
    //           that.arr = res.data.data;
    //           that.$toast.clear();
    //         } else if (res.data.meta.code == 501) {
    //         }
    //       }
    //     });
    // },
    toevaluate() {
      this.$router.push({
        name: "evaluate",
        params: {
          storename: this.tit
        }
      });
    },

    tostoreintroduce() {
      this.$router.push({
        name: "storeintroduce"
      });
    },
    // 下面是点击获取
    // Suk_getfoodlist() {
    //   let that = this;
    //   that.$toast.loading({
    //     message: "加载中..."
    //   });
    //   var Sukdata = {

    //   };
    //   console.log(Sukdata);
    //   that.axios
    //     .post(that.baseUrl + "/store/checkList", that.Qs.stringify(Sukdata), {
    //       headers: {
    //         "Content-Type": "application/x-www-form-urlencoded"
    //       }
    //     })
    //     .then(function(res) {
    //       if (res.request.status === 200) {
    //         if (res.data.meta.code == 200) {
    //           console.log(res.data);
    //           that.$toast.clear();
    //         } else if (res.data.meta.code == 501) {
    //         }
    //       }
    //     });
    // },
    //下面是获取我们的菜单
    getlist(tp) {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        id: localStorage.getItem("storeid"),
        user_id: localStorage.getItem("userid"),
        class_id: tp
      };
      that.axios
        .post(that.baseUrl + "/dining/getCaiDan", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function (res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              console.log(res.data, "list");
              localStorage.setItem("largeid", res.data.data.largeId)
              if (res.data.data.types > 0) {
                that.hascollect = true
              } else if (res.data.data.types == 0) {
                that.hascollect = false
              }
              // that.foodnum
              let arr = [
                {
                  className: "全部"
                }
              ];
              console.log(res.data.data, 1111111111);
              if (res.data.data.classses == null) {
                that.items = arr;
              } else {
                that.items = arr.concat(res.data.data.classses);
              }
              // console.log(that.$refs.bg.style,'bgbgbgbgbg')
              that.box = res.data.data.box;
              that.tit = res.data.data.diningName;
              that.peisongmoney = res.data.data.freight;
              that.qisongmoney = res.data.data.delivery;
              that.headerimg = res.data.data.logo;
              that.bannerimg = res.data.data.image;
              localStorage.setItem("bannerimg", res.data.data.image);
              that.lists = res.data.data.product;
              that.allfoodnum = res.data.data.shoppings.data.number;
              that.allmoney2 = res.data.data.shoppings.data.total;

              localStorage.setItem(
                "payid",
                res.data.data.shoppings.data.shoppingId
              );
              if (that.allfoodnum > 0) {
                that.hasfood = 0;
              } else {
                that.hasfood = 1;
              }
              localStorage.setItem(
                "isroom",
                res.data.data.shoppings.data.shoppingId
              );
              if (res.data.data.shoppings.shoppingId) {
                localStorage.setItem(
                  "payid",
                  res.data.data.shoppings.data.shoppingId
                );
              }
              if (that.allmoney2 > that.qisongmoney) {
                that.hascheck = 0;
              } else {
                that.hascheck = 1;
              }
              if (
                (that.shoplist = res.data.data.shoppings.data.shopp == null)
              ) {
                that.nocaidan = 1;
              } else {
                that.shoplist = res.data.data.shoppings.data.shopp;
                that.nocaidan = 0;
              }
              //   if(res.data.data.shoppings.data.shop.length == 0){
              //       that.nocaidan = 1
              //   }else{}
              if (res.data.data.product == null) {
                that.nofood = 1;
              } else {
                that.nofood = 0;
              }
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    }
    // ischeck(e){
    //   let list = e.target.parentNode.parentNode.childNodes;
    //   let index = e.target.parentNode.parentNode.childNodes.length;
    //   for(let i = 0;i<list.length;i++){
    //       list[i].firstChild.className = "listtit"
    //   }
    //   e.target.className = "isCheck";
    // }
  },
  destroyed() {
    //离开该页面需要移除这个监听的事件
  }
};
</script>
<style lang="scss" scoped>
.shopdetail-content {
  font-size: 0.3rem;
}

.tit {
  width: 90%;
  display: flex;
  align-items: center;
  margin: 0 auto;
  color: #fff;
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  padding-top: 0.4rem;
}

.headerbox {
  // background: url("../../assets/img/banner.png") 0 0 no-repeat grba(0,0,0,0.3);
  background-color: rgba(0, 0, 0, 0.3);
  background-size: 100% 100%;
  height: 4.817rem;
}

.headerimgbox {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  margin: 0.5rem auto;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
  }
}

// 下面的是我们的公告内容
.notice {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 0.883rem;
  line-height: 0.883rem;
  background: #fff;
}

.tplistbox {
  width: 27%;
  margin-top: 0.2rem;
  display: inline-block;
  border: none;

  .tplist {
    border: none;
    text-align: center;
  }
}

.van-badge--select {
  background: #ff9910;
  color: #fff;
}

// 下面的是我们的商品列表
.foodlistbox {
  background: #fff;
  margin-top: 0.2rem;
  display: inline-block;
  width: 73%;
  float: right;

  .foodlist {
    padding: 0.1rem 0;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    // justify-content: space-around;
    position: relative;
  }

  .foodleft {
    width: 3rem;
    height: 2.1rem;
    margin-left: 0.2rem;
    overflow: hidden;
    border-radius: 0.2rem;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .foodright {
    margin-left: 0.2rem;

    .foodtit {
      color: #464646;
      font-size: 0.4rem;
      font-weight: 600;
    }

    .fooddesc {
      color: #8a8a8a;
    }

    .foodsold {
      color: #8a8a8a;
    }

    .foodmoney {
      color: #ff9b00;
      font-size: 0.4rem;
      font-weight: 600;
      line-height: 0.9rem;
    }
  }

  .foodshop {
    width: 2.033rem;
    height: 0.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ff9910;
    font-size: 0.38rem;
    color: #fff;
    border-radius: 0.3rem;
    position: absolute;
    bottom: 0.2rem;
    right: 0.2rem;
  }
}

// 下面的是我们的购物车
.myshop {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 27%;
  background: #fff;
  height: 1.48rem;
  position: fixed;
  bottom: 0;
  color: #ff9b00;
  font-size: 0.8rem;
  border-right: 1px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;
}

.shopbigbox {
  border-top-left-radius: 0.4rem;
  border-top-right-radius: 0.4rem;
}

.white {
  .shopfoodlist {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .shoplistleft {
    padding: 0.2rem 0;
    display: flex;
    align-items: center;

    .yesiconbox {
      width: 0.517rem;
      height: 0.517rem;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .foodimgbox {
      margin-left: 0.3rem;
      width: 2.5rem;
      height: 1.6rem;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .shopfooddesc {
      display: flex;
      height: 1.6rem;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 0.3rem;
    }
  }

  .shoplistright {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1.9rem;

    .jianbox {
      width: 0.567rem;
      height: 0.567rem;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .jiabox {
      width: 0.567rem;
      height: 0.567rem;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.gray {
  text-align: right;
  padding-right: 0.5rem;
  line-height: 0.7rem;
  color: #8a8a8a;
  background: #e5e5e5;
}

.orange {
  display: flex;
  background: #ffb34c;
  height: 1.3rem;
  line-height: 1.4rem;
  color: #fff;
  font-size: 0.45rem;
  font-weight: 600;
  justify-content: space-between;

  .orange-left {
    margin-left: 0.3rem;
  }

  .orange-middle {
  }

  .orange-right {
    background: #ff9910;
    width: 3.5rem;
    text-align: center;
  }
}

// 下面的是弹出我们的商品规格窗口
.showfoodbox {
  width: 80%;
  border-radius: 0.3rem;

  .foodsizebox {
    width: 90%;
    margin: 0 auto;

    .foodsizelist {
      display: flex;

      .size {
        padding: 0.03rem 0.18rem;
        border: 1px solid #aaa;
        text-align: center;
        margin-right: 0.3rem;
        margin-top: 0.3rem;
        margin-bottom: 0.3rem;
        color: #464646;
      }

      .active {
        color: #ff9910;
        border: 1px solid #ff9910;
      }
    }

    .foodsizetit {
      display: flex;
      height: 0.933rem;
      justify-content: space-between;
      align-items: center;

      .foodsizename {
        font-size: 0.4rem;
        font-weight: 600;
      }

      .closeimgbox {
        width: 0.33rem;
        height: 0.33rem;
        overflow: hidden;

        img {
          width: 100%;
          // height: 100%;
        }
      }
    }
  }

  .pushshopbox {
    margin-top: 0.4rem;
    display: flex;
    justify-content: space-between;
    background: #f0f0f0;
    padding: 0.3rem 0;

    .pushshop {
      display: flex;
      background: #ff9b00;
      color: #fff;
      width: 3.317rem;
      height: 0.833rem;
      align-items: center;
      justify-content: center;
      border-radius: 0.2rem;
      margin-right: 0.4rem;
    }
  }
}

// 下面的是我们的展示分享的
.sharebtnbox {
  width: 90%;
  text-align: center;
  color: #464646;
  font-size: 0.45rem;
  padding: 0.2rem 0;
}

.sharebox {
  width: 90%;
  bottom: 1.15rem;
  border-top-left-radius: 0.2rem;
  border-top-right-radius: 0.2rem;

  .iconbox {
    display: flex;
    justify-content: space-around;
    padding: 0.5rem 0;

    .weiiconbox {
      width: 1.25rem;
      height: 1.25rem;

      img {
        width: 100%;
        height: auto;
      }
    }

    .weibobox {
      width: 1.25rem;
      height: 1.25rem;

      img {
        width: 100%;
        height: auto;
      }
    }
  }
}

.fixedicon {
  display: inline-block;
  position: absolute;
  right: 0;
  width: 2rem;
  background: #ff9910;
  height: 0.8rem;
  line-height: 0.8rem;
  margin-top: 0.1rem;
  text-align: center;
  color: #fff;
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}
</style>
